<template>
    <div>
        <!-- 2. 生命周期 -->
        <p ref="op">{{num}}</p>
        <button @click="add">按钮</button>

        <child v-if="show" />
    </div>
</template> 
 
<script>
import child from './Comp2Child.vue'
export default {
    name:'',
    components: {
        child
    },
    props: {

    },
    data() {
        return {
            num: 20,
            show:true
        };
    },
    methods: {
        add(){
            this.num++
            this.show = !this.show
        }
    },
    // 1.创建阶段
    beforeCreate(){
        //未创建前 数据方法都没有，且不能进行dom操作
        console.log(this.num,this.add,this.$refs.op)  
    },
    created(){
        // 组件创建完成，可以操作数据和方法。但还不能操作dom
        console.log(this.num,this.add,this.$refs.op)
    },

    // created 和 beforeMount 中间会将模板在内存中准备好

    // 2.挂载阶段 将准备好的数据放到模板上,然后挂载到dom
    beforeMount(){
        // 这个和created差不多，可以操作数据和方法。但还不能操作dom
    },
    mounted(){
        // 挂载完成
        // 可以操作数据和方法, 同时可以操作dom （可以拿到$refs的数据）
    },

    // 更新阶段 -- 页面数据发送改变就会触发
    beforeUpdate(){
        // data的数据会马上发生变化，但是页面元素还没更新过来
        console.log('跟新前',this.num,this.$refs.op.innerHTML)
    },
    updated(){
        console.log('跟新后',this.num,this.$refs.op.innerHTML)
    }

};
</script>

<style scoped lang="less">

</style>
